<template>
   <!-- 显示 -->
  <div class="shop-notice-wrapper" v-if="myAccount < 50000 && promotionStep">
    月累计采购额<span class="color-red">满返~最高888元红包！</span>
    <template v-if="myAccount < 10000">
      本月尚未获得红包
    </template>
    <template v-else>
      已获得<span class="color-red">￥{{totalReward}}</span>
    </template>
    ,继续采购<span class="color-red">￥{{(tasklist[grade]['money'] - myAccount) | floatPrices}}</span>，可获得<span class="color-red">￥{{tasklist[grade]['redbag']}}</span>红包！
    <router-link :to="{name: 'promotion'}" class="watch-detail" v-if="$route.name === 'ShopCart'">查看详情</router-link>
  </div>
</template>

<script>
export default {
  name: 'ShopActiveTaskNotice',
  computed: {
    totalReward () {
      let para
      for (let i = 0; i < 3; i++) {
        let item = this.tasklist[i]
        if (this.myAccount < item.money) {
          this.grade = i
          para = i
          break
        }
      }
      let total = 0
      this.tasklist.map((item, index) => {
        if (para > index) {
          total += item.redbag
        }
      })
      return total
    },
    promotionStep () {
      return this.$store.state.activity.activityPromotionList.step && this.$store.state.activity.activityPromotionList.step === 1
    }
  },
  data () {
    return {
      grade: 0,
      myAccount: 0,
      tasklist: [{id: 1, money: 10000, redbag: 150}, {id: 2, money: 30000, redbag: 339}, {id: 3, money: 50000, redbag: 399}]
    }
  },
  mounted () {
    this.$store.dispatch('getActivityPromotion').then(() => {
      if (this.$store.state.activity.activityPromotionList.voList.length) {
        this.myAccount = this.$store.state.activity.activityPromotionList.voList[0].mySumActivityAmount
      } else {
        this.myAccount = 0
      }
      this.$emit('shopAmount', this.myAccount)
    })
  }
}
</script>

<style lang="scss" scoped>
  .shop-notice-wrapper{
    margin-bottom: 10px;
    height: 62px;
    background: rgba(255,245,206,1);
    line-height: 62px;
    padding-left: 30px;
    padding-right: 40px;
    .watch-detail{
      float:right;
      color: #009CFF;
      font-size: 14px;
    }
  }
</style>
